import dash_bootstrap_components as dbc
from dash import html, Input, Output, State
from server import app

alert_html = html.Div([
    html.Br(),
    html.P(html.Strong('使用Alert组件为用户操作提供上下文反馈消息, 提醒控件', style={'color': 'rgb(255, 153, 51)'})),
    dbc.Button('关闭或显示一条警报', id='alert-toggle', className='me-1', n_clicks=0),
    html.Hr(),
    dbc.Alert('我是一条警报', 
              id='alert-fade', 
              dismissable=True, # 为警报添加一个解除按钮，单击后关闭警报
              is_open=True,
              color='warning'),
])

@app.callback(
    Output('alert-fade', 'is_open'),
    [Input('alert-toggle', 'n_clicks')],
    [State('alert-fade', 'is_open')]
)
def toggle_alert(n, is_open):
    if n:
        return not is_open
    return is_open
